import React, { Component } from 'react';

import MyHeader from '../components/home/MyHeader'

import MySwiper from '../components/home/MySwiper'
import MyEntry from '../components/home/MyEntry'
import Recommend from '../components/home/Recommend';
import { getbannerlist } from '../api/home'
import { Skeleton } from 'antd-mobile'
class Home extends Component {
    state = {
        bannerlist: []
    }
    componentDidMount() {
        getbannerlist().then((res) => {
            // console.log(res.data.list, '轮播图');
            this.setState({
                bannerlist: res.data.list
            })
        })
    }
    render() {
        return (
            <div className='home'>
                <MyHeader></MyHeader>

                {/* 轮播图和10分类组件 */}
                { this.state.bannerlist.length==0?
                    <>
                    <Skeleton.Title animated />
                    <Skeleton.Paragraph lineCount={5} animated />
                    </>:
                    <MySwiper swiperlist={this.state.bannerlist}></MySwiper>
                }
                <MyEntry></MyEntry>

                {/* 推荐页组件 */}
                <Recommend></Recommend>

            </div>
        );
    }
}

export default Home;